<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content">
      <div class="modal-header">
        <h3>{{ isEditMode ? '编辑装备' : '添加装备' }}</h3>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      <div class="modal-body">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="equipName">装备名称:</label>
            <input id="equipName" type="text" v-model="formData.equipName" required />
          </div>
          <div class="form-group">
            <label for="equipNumber">装备编号:</label>
            <input id="equipNumber" type="text" v-model="formData.equipNumber" required :disabled="isEditMode" />
          </div>
          <div class="form-group">
            <label for="model">类型:</label>
            <select id="model" v-model="formData.model">
              <option>武器</option>
              <option>通讯</option>
              <option>防护</option>
              <option>记录</option>
              <option>交通工具</option>
              <option>侦查</option>
              <option>急救</option>
              <option>其他</option>
            </select>
          </div>
          <div class="form-group">
            <label for="status">状态:</label>
<!--            <span id = "status">{{formData.status}}</span>-->
            <select id="status" v-model="formData.status">
              <option value="正常">正常</option>
              <option value="待维修">待维修</option>
              <option value="已分配">已分配</option>
              <option value="报废">报废</option>
            </select>
          </div>
          <div class="form-group">
            <label for="position">存放位置:</label>
            <select id="position" v-model="formData.position">
              <option>武器库A</option>
              <option>装备室B</option>
              <option>装备室C</option>
              <option>车辆管理区</option>
              <option>无人机库</option>
              <option>指挥中心</option>
              <option>其他</option>
            </select>
          </div>
          <div class="form-group">
            <label for="lastMaintain">上次维护日期:</label>
            <input id="lastMaintain" type="date" v-model="formData.lastMaintain" />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-cancel" @click="$emit('close')">取消</button>
        <button class="btn btn-confirm" @click="submitForm">{{ isEditMode ? '更新' : '提交' }}</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const props = defineProps<{ initialData?: object, isEditMode: boolean }>();
const emit = defineEmits(['close', 'save']);

const formData = reactive({
  equipNumber: '',
  equipName: '',
  model: '',
  status: '',
  position: '',
  lastMaintain: '',
  ...props.initialData
});

const submitForm = () => {
  emit('save', { ...formData });
};
</script>

<style scoped>
@import "@/assets/styles/views/admin/EquipmentFormModal.css";
</style>
